<template>
	<view class="bottom-tab">
		<view class="bottom-tab-item" @click="changeTap(item)" v-for="(item,index) in tabList" :key="index">
			<image v-show="curTab==item.id" class="first-img" :src="item.imgOn"></image>
			<image v-show="curTab!=item.id" class="first-img" :src="item.imgOff"></image>
			<text :class="curTab==item.id?'text-position text-on':'text-position'">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uni-bottom-tab",
		props: {
			tabIndex: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				curTab: 1,
				tabList: [{
						id: 1,
						name: "首页",
						imgOff: "/static/img/icon_01.png",
						imgOn: "/static/img/icon_01_f.png"
					},
					{
						id: 2,
						name: "业务简介",
						imgOff: "/static/img/icon_02.png",
						imgOn: "/static/img/icon_02_f.png"
					},
					{
						id: 3,
						name: "订单",
						imgOff: "/static/img/icon_03.png",
						imgOn: "/static/img/icon_03_f.png"
					},
					{
						id: 4,
						name: "我的",
						imgOff: "/static/img/icon_04.png",
						imgOn: "/static/img/icon_04_f.png"
					}
				]
			}
		},
		watch: {
			tabIndex: {
				handler(newName, oldName) {
					this.curTab = this.tabIndex;
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			$redirect(_url) {
				uni.redirectTo({
					"url": _url
				})
			},

			changeTap(e) {
				this.curTab = e.id;
				let data = {
					id: e.id,
					name: e.name
				}
				this.$emit('changeTap', data)
			}
		}
	}
</script>

<style lang="scss">
	.bottom-tab {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		background-color: #FDFDFD;

		&:before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 1upx;
			content: '';
			transform: scaleY(0.33);
			transform-origin: 0 0;
			background-color: #bfbfbf;
		}

		.bottom-tab-item {
			width: 25%;
			height: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.first-img {
				margin-top: 2px;
				width: 24px;
				height: 24px;
			}

			.text-position {
				margin-top: 0;
				font-size: 10px;
				line-height: 1.8;
				color: #bfbfbf;
			}

			.text-on {
				color: #3e5388;
			}
		}
	}
</style>
